<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="支付状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="支付状态" clearable>
          <el-option
            v-for="dict in unionMiniPayStatus"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入订单编号"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column label="描述" align="left" min-width="320">
        <template #default="scope">
          <div>商品标题：{{ scope.row.subject }}</div>
          <div
            >订单编号：<el-link type="primary" @click="getUnionPayInfo(scope.row)">{{
              scope.row.orderId
            }}</el-link>
          </div>
          <div
            >人员ID：<el-link type="success" @click="getMemberuser(scope.row.memberUserId)">{{
              scope.row.memberUserId
            }}</el-link></div
          >
        </template>
      </el-table-column>
      <el-table-column label="金额(元)" align="center">
        <el-table-column label="金额" align="left" prop="amount" width="260">
          <template #default="scope">
            <div>支付金额：{{ divide(scope.row.amount, 100) }}</div>
            <div>房东分账：{{ divide(scope.row.balance, 100) }}</div>
            <div>分账账户：{{ scope.row.ownMemberMatCode }}</div>
            <div>是否分账：{{ scope.row.autoDivisionFlag == 1 ? '是' : '否' }}</div>
          </template>
        </el-table-column>
        <el-table-column label="手续费" align="left" prop="platformFeeRate" width="160">
          <template #default="scope">
            <div>平台手续费：{{ divide(scope.row.platformFeeAmount, 100) }}</div>
            <div>平台百分比：{{ scope.row.platformFeeRate }}%</div>
            <div>银联手续费：{{ divide(scope.row.channelFeeAmount, 100) }}</div>
            <div>银联百分比：{{ scope.row.channelFeeRate }}%</div>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="状态" align="left" prop="status" width="160">
        <template #default="scope">
          <div
            >支付状态：<dict-tag :type="DICT_TYPE.UNION_MINI_PAY_STATUS" :value="scope.row.status"
          /></div>
          <div
            >下发状态：<dict-tag :type="DICT_TYPE.METER_DOWN_FLAG" :value="scope.row.downMeterFlag"
          /></div>
        </template>
      </el-table-column>
      <el-table-column label="时间" align="left" prop="expireTime" width="240">
        <template #default="scope">
          <div>创建时间：{{ formatDate(scope.row.createTime) }}</div>
          <div>支付成功：{{ formatDate(scope.row.successTime) }}</div>
          <div>失效时间：{{ formatDate(scope.row.expireTime) }}</div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>
</template>
<script lang="ts" setup>
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import { divide } from '@/utils/tools'
import { getPayElecChargePage, getUnionMiniPayOrderInfo } from '@/api/zwsj/payElecCharge'
import { getUser } from '@/api/member/user/index'
import { ElNotification } from 'element-plus'

defineOptions({ name: 'OwnPayElecCharge' })

const loading = ref(false) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref() // 列表的数据

const unionMiniPayStatus = getIntDictOptions(DICT_TYPE.UNION_MINI_PAY_STATUS)

const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  orderId: undefined,
  status: undefined,
  notifyStatus: undefined,
  downMeterFlag: undefined,
  ownMemberUserId: undefined,
  ownMemberMatCode: undefined
})

// /** 打开弹窗 */
// const open = async (ownMemberUserId: number) => {
//   queryParams.ownMemberUserId = ownMemberUserId
//   dialogVisible.value = true
//   dialogTitle.value = '房东名下电表充值订单'
//   getList()
// }
// defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const queryFormRef = ref() // 搜索的表单

/** 查询部门列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await getPayElecChargePage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

const getUnionPayInfo = async (row: any) => {
  const id = row.id
  const data = await getUnionMiniPayOrderInfo(id)
  ElNotification({
    title: `订单状态：${data.status}`,
    message: h('i', { style: 'color: teal' }, `订单号：${data.merOrderId}`)
  })
}

const getMemberuser = async (memberUserId: number) => {
  const data = await getUser(memberUserId)
  console.info(data)
  ElNotification({
    title: `人员姓名：${data.nickname}`,
    message: h('i', { style: 'color: teal' }, `手机号码：${data.mobile}`)
  })
}

const props = defineProps({
  ownMemberUserId: {
    type: Number,
    required: true
  }
})
watch(
  () => props.ownMemberUserId,
  () => (queryParams.ownMemberUserId = props.ownMemberUserId),
  { immediate: true }
)

/** 初始化 **/
onMounted(() => {
  // queryParams.ownMemberUserId = ownMemberUserId
  // getList()
})
</script>
